<template>
    <u-popup v-model="value" :border-radius="borderRadius" :maskCloseAble="maskCloseAble" :popup="false"
             :safeAreaInsetBottom="safeAreaInsetBottom"
             :z-index="uZIndex" length="auto" mode="bottom" @close="popupClose">
        <view v-if="tips.text" :style="[tipsStyle]" class="u-tips u-border-bottom">
            {{ tips.text }}
        </view>
        <block v-for="(item, index) in list" :key="index">
            <view
                :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
                :hover-stay-time="150"
                :style="[itemStyle(index)]"
                class="u-action-sheet-item u-line-1"
                @tap="itemClick(index)"
                @touchmove.stop.prevent
            >
                <text>{{ item.text }}</text>
                <text v-if="item.subText" class="u-action-sheet-item__subtext u-line-1">{{ item.subText }}</text>
            </view>
        </block>
        <view v-if="cancelBtn" class="u-gab">
        </view>
        <view v-if="cancelBtn" :hover-stay-time="150" class="u-actionsheet-cancel u-action-sheet-item"
              hover-class="u-hover-class" @tap="close" @touchmove.stop.prevent>{{ cancelText }}
        </view>
    </u-popup>
</template>

<script>
/**
 * actionSheet 操作菜单
 * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
 * @tutorial https://www.uviewui.com/components/actionSheet.html
 * @property {Array<Object>} list 按钮的文字数组，见官方文档示例
 * @property {Object} tips 顶部的提示文字，见官方文档示例
 * @property {String} cancel-text 取消按钮的提示文字
 * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
 * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
 * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
 * @property {Number String} z-index z-index值（默认1075）
 * @property {String} cancel-text 取消按钮的提示文字
 * @event {Function} click 点击ActionSheet列表项时触发
 * @event {Function} close 点击取消按钮时触发
 * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
 */
export default {
    name: "u-action-sheet",
    props: {
        // 点击遮罩是否可以关闭actionsheet
        maskCloseAble: {
            type: Boolean,
            default: true
        },
        // 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
        list: {
            type: Array,
            default() {
                // 如下
                // return [{
                // 	text: '确定',
                // 	color: '',
                // 	fontSize: ''
                // }]
                return [];
            }
        },
        // 顶部的提示文字
        tips: {
            type: Object,
            default() {
                return {
                    text: '',
                    color: '',
                    fontSize: '26'
                }
            }
        },
        // 底部的取消按钮
        cancelBtn: {
            type: Boolean,
            default: true
        },
        // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
        safeAreaInsetBottom: {
            type: Boolean,
            default: false
        },
        // 通过双向绑定控制组件的弹出与收起
        value: {
            type: Boolean,
            default: false
        },
        // 弹出的顶部圆角值
        borderRadius: {
            type: [String, Number],
            default: 0
        },
        // 弹出的z-index值
        zIndex: {
            type: [String, Number],
            default: 0
        },
        // 取消按钮的文字提示
        cancelText: {
            type: String,
            default: '取消'
        }
    },
    computed: {
        // 顶部提示的样式
        tipsStyle() {
            let style = {};
            if (this.tips.color) style.color = this.tips.color;
            if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
            return style;
        },
        // 操作项目的样式
        itemStyle() {
            return (index) => {
                let style = {};
                if (this.list[index].color) style.color = this.list[index].color;
                if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
                // 选项被禁用的样式
                if (this.list[index].disabled) style.color = '#c0c4cc';
                return style;
            }
        },
        uZIndex() {
            // 如果用户有传递z-index值，优先使用
            return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
        }
    },
    methods: {
        // 点击取消按钮
        close() {
            // 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
            // 这是一个vue发送事件的特殊用法
            this.popupClose();
            this.$emit('close');
        },
        // 弹窗关闭
        popupClose() {
            this.$emit('input', false);
        },
        // 点击某一个item
        itemClick(index) {
            // disabled的项禁止点击
            if (this.list[index].disabled) return;
            this.$emit('click', index);
            this.$emit('input', false);
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-tips {
    font-size: 26 rpx;
    text-align: center;
    padding: 34 rpx 0;
    line-height: 1;
    color: $u-tips-color;
}

.u-action-sheet-item {
    @include vue-flex;;
    line-height: 1;
    justify-content: center;
    align-items: center;
    font-size: 32 rpx;
    padding: 34 rpx 0;
    flex-direction: column;
}

.u-action-sheet-item__subtext {
    font-size: 24 rpx;
    color: $u-tips-color;
    margin-top: 20 rpx;
}

.u-gab {
    height: 12 rpx;
    background-color: rgb(234, 234, 236);
}

.u-actionsheet-cancel {
    color: $u-main-color;
}
</style>
